import { defineComponent, reactive } from "vue";
import styles from "./PropertyList.module.less";
import { imgPath } from "@/common/utils";
export default defineComponent({
  setup() {
    const navs = reactive({
      list: [
        {
          text: '全部订单',
        },
        {
          text: '待支付',
        },
        {
          text: '待出单',
        },
        {
          text: '出单失败',
        },
        {
          text: '已出单',
        },
        {
          text: '已退保',
        },
        {
          text: '已注销',
        },
        {
          text: '已取消',
        },
      ],
      navsActived: 0,
    })
    const NavClick = (index: number) => {
      navs.navsActived = index
    }
    const Navs = () => (
      <div class={styles['propertyList-nav']}>
        {
          navs.list.map((itemY: any, index: number) => (
            <div class={styles['nav-item']} onClick={() => { NavClick(index) }}>
              <span class={[styles.text,
              index === navs.navsActived && styles['nav-item-actived'],
              index !== navs.navsActived && styles['nav-item-noActived']]}
              >{itemY.text}</span>
            </div>
          ))
        }
      </div>
    )
    const filterForm = reactive({
      insureTime: {  //投保时间类型
        timeType: '1',
        time: [],
      },
      insureTimeType: [
        {
          label: '投保时间',
          value: '1',
        },
        {
          label: '起保时间',
          value: '2',
        },
      ],
      order:{   //投保单号
        orderType:'1',
        orderId:'',
      },
      orderType:[
        {
          label:'投保单号',
          value:'1',
        },
        {
          label:'保单号',
          value:'2',
        },
      ],
    })
    const handleChange = () => {
      console.log(filterForm.insureTime)
    }
    //搜索
    const search = () => {
      console.log(filterForm.order)
    }
    const Filter = () => (
      <div class={styles['propertyList-filter']}>
        <a-form class={styles['filter-form']}>
          <a-select
            v-model={[filterForm.insureTime.timeType, "value"]}
            options={filterForm.insureTimeType}
            style="width:12%"
            change={handleChange()}
          >
          </a-select>
          <a-range-picker v-model:value={[filterForm.insureTime.time]} valueFormat="YYYY-MM-DD" style="margin-left: 10px;"></a-range-picker>
          <a-select 
            v-model={[filterForm.order.orderType,"value"]} 
            options={filterForm.orderType} 
            style="width:12%;margin-left: 10px;"
            >
          </a-select>
          <a-input style="width:24%;margin-left: 10px;" v-model:value={filterForm.order.orderId}/>
          <a-button class={styles.button} onClick={()=>{ search() }}>搜索</a-button>
        </a-form>
      </div>
    )

    //下载导出
    const exportClick = () => {

    }
    const state = reactive({
      list:[]
    })
    return () => (
      <div class={styles['propertyList']}>
        <div class={styles['header-box']}>
          <span>财产险订单</span>
          <div class={styles['export-btn']} onClick={() => { exportClick() }}>
            <img src={imgPath('/userCenter/exportBTn.png')} />
            <span>导出申请</span>
          </div>
        </div>
        <div class={styles['propertyList-content']}>
          <Navs />
          <Filter />
          <div class={styles['propertyList-thead']}>
            <div class={styles['col-1']}>订单详情</div>
            <div class={styles['col-2']}>状态/保费（元）</div>
            <div class={styles['col-3']}>操作</div>
          </div>
          {
            state.list.length === 0 ? 
              <div class={styles['no-message']}>
                <img src={imgPath('/userCenter/no-message.jpg')} />
              </div> :
              <div>

              </div>
          }
        </div>
      </div>
    )
  }
})